<template>
    <div class="tuijian">
        <div class="tjpl">
            <p>热卖品牌</p>
            <div class="ls">
                <dl v-for="item in list" :key="item.id">
                 <dt>
                    {{item.englishn}}
                </dt>
                <dd>{{item.name}}</dd>
            </dl>
            </div>
        </div>
        <div class="tjpp">
            <p>配饰品类</p>
            <div class="ls">
                <dl v-for="item in list" :key="item.id">
                <dt>
                    <img :src="item.img" alt="">
                </dt>
                <dd>{{item.name}}</dd>
            </dl>
            </div>
        </div>
    </div>
</template>

<script>
import { COMMENTS } from '@/requests/apis'
export default {
  name: 'tuijian',
  data () {
    return {
      list: []
    }
  },
  mounted () {
    this.$http.get(COMMENTS)
      .then(resp => {
        // console.log(resp)
        this.list = resp.data.data
      })
  }

}
</script>

<style lang='scss'>
.tuijian{
    // display: flex;
    flex: 1;
}
.tjpl{
    // height: 300px;
    p{
        height: 54px;
        line-height: 54px;
        font-size: 25px;
        text-align: center;
    }
    .ls{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        dl{
            dd{
                text-align: center;
            }
        }
    }
}
.tjpp{
    p{
        height: 54px;
        line-height: 54px;
        font-size: 25px;
        text-align: center;
    }
     .ls{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        dl{
            dt{
                font-size: 15px;
            }
            dd{
                text-align: center;
                font-size: 12px;
            }
        }
    }
}

</style>
